<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>传感器数据监控</title>
    <style>
        *{
            box-sizing: border-box;
            padding: 0;
            margin: 0;
            border: 0;
            font-style:normal;
            font-weight:normal;
            font-family: "微软雅黑", Tahoma, Geneva, sans-serif;
        }
        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 0.6rem;
            background-color: #03396F;
        }
        ::-webkit-scrollbar-thumb {
            background-color: #034B95;
            border-radius: 0.3rem;
        }
        .box{
            background-color: #00225F;
            height: 100vh;
            overflow: auto;
            padding-top: 140px;
        }
        .top{
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 140px;
            overflow: hidden;
            background-color: #00225F;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .top input{
            background: transparent;
            display: block;
            width: 180px;
            height: 80px;
            border: 3px solid #3A81D2;
            color: #A0F3FF;
            font-size: 40px;
            font-weight: bold;
            border-radius: 5px;
            line-height: 74px;
            text-align: center;
        }
        .top b{
            cursor: pointer;
            color: #A0F3FF;
            padding: 0 20px;
            letter-spacing: 2px;
        }
        .con{
            padding:10px 20px 20px 20px;
            display: flex;
            flex-wrap: wrap;
        }
        .con article{
            margin: 15px 15px;
            background-color: #055985;
            color: #24E8FF;
            height: 38px;
            font-size: 14px;
            padding: 0 20px;
            line-height: 38px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="top">
        <input value="20" type="text" readonly/>
        <b onclick="editFn();">修改</b>
    </div>
    <div class="con">

    </div>
</div>
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    var ws;
    $(function(){
        getCgq();
        $('.top input').on('blur',function(){
            if(new RegExp(/(^[\-0-9][0-9]*(.[0-9]+)?)$/).test($('.top input').val())){
                $('.top input').attr('readonly',true);
            }else{
                alert("请输入数字")
            }
        });
        if ("WebSocket" in window){
            ws = new WebSocket("ws://192.168.9.158:8080/socket/sample");
        }else{
            alert("您的浏览器不支持WebSocket")
        }
        $('.con').on('click','article',function(){
            ws.send($(this).text());
            ws.onmessage = function (result){
                $('.top input').val(JSON.parse(result.body).message);
            };
        })
    })
    function getCgq(){
        $.ajax({
            url:'http://192.168.9.158:8080/opc/items',
            type:'get',
            success: function(res){
                $('.con').empty();
                for(var i = 0; i < res.length; i++){
                    $('.con').append($('<article>'+ res[i] +'</article>'))
                }
            }
        })
    }
    function editFn(){
        $('.top input').attr('readonly',false).focus();

    }
</script>
</body>
</html>
